<template>
  <base-panel>
    <template #header>
      <h3>水库信息</h3>
    </template>
    <div class="info-sections">
      <div class="info-section">
        <div class="location">小浪底</div>
        <div class="data-grid">
          <div class="data-item">
            <span class="label">背水位</span>
            <span class="value">262.25 <span class="unit">m</span></span>
          </div>
          <div class="data-item">
            <span class="label">蓄水量</span>
            <span class="value">61.44 <span class="unit">亿m³</span></span>
          </div>
          <div class="data-item">
            <span class="label">实时流量</span>
            <span class="value">876 <span class="unit">m³/s</span></span>
          </div>
          <div class="data-item">
            <span class="label">日均流量</span>
            <span class="value">813 <span class="unit">m³/s</span></span>
          </div>
        </div>
      </div>
      <div class="info-section">
        <div class="location">西霞院</div>
        <div class="data-grid">
          <div class="data-item">
            <span class="label">背水位</span>
            <span class="value">133.32 <span class="unit">m</span></span>
          </div>
          <div class="data-item">
            <span class="label">蓄水量</span>
            <span class="value">0.58 <span class="unit">亿m³</span></span>
          </div>
          <div class="data-item">
            <span class="label">实时流量</span>
            <span class="value">858 <span class="unit">m³/s</span></span>
          </div>
          <div class="data-item">
            <span class="label">日均流量</span>
            <span class="value">808 <span class="unit">m³/s</span></span>
          </div>
        </div>
      </div>
    </div>
  </base-panel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel.vue'
</script>

<style lang="scss" scoped>
.info-sections {
  .info-section {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
    
    &:not(:first-child) {
      padding-top: 16px;
    }
    
    .location {
      color: #fff;
      font-size: 16px;
      margin-bottom: 12px;
    }
    
    .data-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      
      .data-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        
        .label {
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
        
        .value {
          color: #3f9eff;
          font-size: 16px;
          font-weight: 500;
          
          .unit {
            font-size: 12px;
            margin-left: 2px;
          }
        }
      }
    }
  }
}
</style> 